<template>
    <div id="app">
        <div class="main_box">
            <div class="divider">
                <el-divider>联系人列表</el-divider>
            </div>
            <div class="show_box">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="100%"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                >
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="telephone" label="电话">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </div>
            <div class="info">
                <div class="divider">
                    <el-divider content-position="left">信息窗口</el-divider>
                </div>
                <el-form ref="infoFormRef" :model="infoForm" label-width="50px">
                    <el-form-item label="姓名:">
                        <el-input
                            :disabled="status == 'delete' ? true : false"
                            style="width: 200px"
                            v-model="infoForm.name"
                        ></el-input>
                        <el-button
                            :disabled="status == 'delete' ? true : false"
                            style="margin-left: 10px; width: 100px"
                            type="primary"
                            @click="handleSubmit"
                            >确认</el-button
                        >
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input
                            :disabled="status == 'delete' ? true : false"
                            style="width: 200px"
                            v-model="infoForm.telephone"
                        ></el-input>
                        <el-button
                            :disabled="status == 'delete' ? true : false"
                            style="margin-left: 10px; width: 100px"
                            type="info"
                            @click="handleCancel"
                            >取消</el-button
                        >
                    </el-form-item>
                    <el-form-item label="地址:">
                        <el-input
                            :disabled="status == 'delete' ? true : false"
                            type="textarea"
                            v-model="infoForm.address"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="operation">
                <div class="divider">
                    <el-divider content-position="left">操作面板</el-divider>
                </div>
                <el-button
                    :disabled="
                        status == 'delete' || status == 'add' ? false : true
                    "
                    class="opbutton"
                    @click="handleAddContact"
                    >添加联系人信息</el-button
                >
                <el-button
                    :disabled="
                        status == 'delete' || status == 'update' ? false : true
                    "
                    class="opbutton"
                    @click="handleUpdataContact"
                    >修改选中联系人信息</el-button
                >
                <el-button
                    :disabled="status == 'delete' ? false : true"
                    class="opbutton"
                    @click="handleDeleteContact"
                    >删除选中联系人信息</el-button
                >
                <el-button
                    :disabled="status == 'delete' ? false : true"
                    class="opbutton"
                    @click="handleAbout"
                    >关于本软件</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            infoForm: {
                id: null,
                name: "",
                telephone: "",
                address: "",
            },
            // 哪一行被选中
            currentRow: null,
            // 当前控制状态
            status: "delete",
            //
        };
    },
    async created() {
        this.getAllContacts();
    },
    methods: {
        // 获取所有联系人
        async getAllContacts() {
            const res = await this.$http.get("getallusers");
            this.tableData = res.data;
        },
        // 处理选择不同行的操作
        handleCurrentChange(val) {
            this.currentRow = val;
            this.infoForm.id = this.currentRow.id;
            this.infoForm.name = this.currentRow.name;
            this.infoForm.telephone = this.currentRow.telephone;
            this.infoForm.address = this.currentRow.address;
        },
        // 清空infoform
        clearInfoForm() {
            this.infoForm.id = null;
            this.infoForm.name = "";
            this.infoForm.telephone = "";
            this.infoForm.address = "";
        },
        // 处理点击添加联系人
        handleAddContact() {
            this.status = "add";
            this.clearInfoForm();
        },
        // 处理点击更新联系人
        handleUpdataContact() {
            this.status = "update";
        },
        // 处理删除联系人
        async handleDeleteContact() {
            let params = new URLSearchParams();
            console.log(this.infoForm.id);
            params.append("id", this.infoForm.id);
            const res = await this.$http.post("delete", params);
            this.clearInfoForm();
            this.getAllContacts();
        },
        // 处理显示关于
        handleAbout() {},
        // 处理提交
        handleSubmit() {
            if (this.status == "add") {
                this.addContact();
            } else if (this.status == "update") {
                this.update();
            }
        },
        // 增加联系人
        async addContact() {
            let params = new URLSearchParams();
            params.append("name", this.infoForm.name);
            params.append("telephone", this.infoForm.telephone);
            params.append("address", this.infoForm.address);
            const res = await this.$http.post("adduser", params);
            this.getAllContacts();
            this.clearInfoForm();
            this.handleCancel();
        },
        // 更新联系人
        async update() {
            let params = new URLSearchParams();
            params.append("id", this.infoForm.id);
            params.append("name", this.infoForm.name);
            params.append("telephone", this.infoForm.telephone);
            params.append("address", this.infoForm.address);
            const res = await this.$http.post("update", params);
            this.getAllContacts();
            this.clearInfoForm();
            this.handleCancel();
        },
        // 处理取消
        handleCancel() {
            this.status = "delete";
        },
    },
};
</script>

<style scoped>
.main_box {
    border: 1px solid black;
    border-radius: 12px;
    width: 50%;
    height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}
.show_box {
    /* border: 1px solid black; */
    border-radius: 12px;
    padding: 5px;
    height: 40%;
}
.divider {
    width: 90%;
    position: relative;
    left: 5%;
    background: silver;
}
.info {
    width: 50%;
    height: 40%;
    float: left;
    padding: 5px;
}
.operation {
    width: 40%;
    height: 40%;
    float: right;
    padding: 5px;
    border-radius: 15px;
}
.opbutton {
    width: 100%;
    height: 38px;
    margin: 5px 0 5px 10px;
}
</style>